<template>
  <div class="register_container">
    <div class="wlecome">
      <p>您好</p>
      <p>欢迎注册华润微服务</p>
    </div>

    <!-- 注册表单 -->
    <div class="registerForm">
      <mt-field :state="nameState" placeholder="请输入真实姓名" v-model="realName"></mt-field>
      <mt-field :state="idState" placeholder="请输入身份证号" v-model="identity"></mt-field>
      <mt-field :state="phoneState" placeholder="请输入手机号码" type="tel" v-model="phoneNumber"></mt-field>
      <mt-field :state="capState" v-model="captcha" placeholder="请输入验证码">
        <mt-button :disabled="capBtnDisabled" @click="getCaptcha" class="captcha" :class="{ active: isActive }">{{capBtnText}}</mt-button>
      </mt-field>
      <mt-field :state="pwsState" placeholder="请设置登入密码(8~20个数字、字母和特殊字符号)" type="password" v-model="password"></mt-field>
      <mt-button @click="register" class="registerBtn" type="primary">注册</mt-button>
    </div>

    <p class="protocol">注册/登录即代表您已同意<span>《华润燃气用户协议》</span></p>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      // 注册表单的数据绑定对象
      realName: '',
      identity: '',
      phoneNumber: '',
      captcha: '',
      password: '',
      // 注册表单的格式状态
      nameState: '',
      idState: '',
      phoneState: '',
      capState: '',
      pwsState: '',

      // 验证码按钮上的提示文本
      capBtnText: '获取验证码',
      // isActive 类是否有效
      isActive: false,
      // 验证码按钮是否不可用
      capBtnDisabled: false
    }
  },
  created () {},
  methods: {
    // 获取去验证码
    getCaptcha () {
      // 调用获取验证码的接口
      console.log('调用获取验证码的接口')
      // 将 发送验证码按钮 禁用
      this.capBtnDisabled = true
      // 调用 倒计时 方法
      this.countDown()
    },
    // 当点击 获取验证码按钮时 将按钮 active类的isActive修改为true 并开始倒计时
    countDown () {
      // 倒计时时间
      let timer = 5
      const timerId = setInterval(() => {
        if (timer === 0) {
          clearInterval(timerId)
          this.capBtnText = '获取验证码'
          this.isActive = false
          // 将 发送验证码按钮 启用
          this.capBtnDisabled = false
        } else {
          this.capBtnText = '重新发送(' + timer + ')'
          timer--
          this.isActive = true
        }
      }, 1000)
    },
    // 点击注册按钮
    register () {
      // 判断用户输入的表单项是否符合格式要求
      const ok = 'success'
      const isOk = this.nameState === ok && this.idState === ok && this.phoneState === ok && this.pwsState === ok /* && this.capState === ok */
      if (!isOk) {
        Toast({
          message: '表单项格式不正确',
          position: 'bottom',
          duration: 3000
        })
        return
      }
      // 拼接请求参数对象
      const registerForm = {
        realName: this.realName,
        identity: this.identity,
        phoneNumber: this.phoneNumber,
        captcha: this.captcha,
        password: this.password
      }

      // 发送注册请求
      this.$http.post('/register', registerForm)
    }
  },
  watch: {
    realName: function (val) {
      if (!val.trim().length) {
        this.nameState = 'error'
        return
      }
      this.nameState = 'success'
    },
    identity: function (val) {
      const regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (regId.test(val)) {
        this.idState = 'success'
        return
      }
      this.idState = 'error'
    },
    phoneNumber: function (val) {
      const regPhone = /^1[3|4|5|7|8][0-9]{9}$/
      const istrue = regPhone.test(val)
      if (istrue) {
        this.phoneState = 'success'
      } else {
        this.phoneState = 'error'
      }
    },
    // captcha: function (val) {
    //   if (/^[0-9]{6}$/.test(val)) {
    //     this.capState = 'success'
    //     return
    //   }
    //   this.capState = 'error'
    // },
    password: function (val) {
      const length = val.trim().length
      if (length >= 8 && length <= 20) {
        this.pwsState = 'success'
      } else {
        this.pwsState = 'error'
      }
    }
  }

}
</script>

<style lang="less" scoped>
  .register_container {
    position: relative;
    box-sizing: border-box;
    padding: 79px 20px 10px;
    height: 100%;
  }
  // 欢迎块
  .wlecome p {
    font-family: 'Microsoft YaHei Bold', 'Microsoft YaHei';
    font-weight: 700;
    font-style: normal;
    margin: 0;
    color: #333333;
  }

  .wlecome p:nth-child(1) {
    font-size: 18px;
  }
  .wlecome P:nth-child(2) {
    font-size: 16px;
  }

  // 注册表单块
  .registerForm {
    margin-top: 20px;

    /deep/ .mint-cell-wrapper {
      background-position: bottom;
    }

    /deep/ input {
      font-size: 13px;
    }

    /deep/ input::-webkit-input-placeholder {
      font-size: 13px;
      color: #CCCCCC;
    }
  }

  .captcha {
    margin-right: 20px;
    font-size: 13px;
    color: #F59E0E;
    box-shadow: none;
  }
  .active {
    color: rgb(153, 153, 153);
  }

  .registerBtn {
    margin-top: 25px;
    width: 100%;
    font-size: 14px;
    background-color: #F59E0E;
  }

</style>
